import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Modal, Form, Input, Select, Button, message } from 'antd';
import { createAdmin } from '@/api/userInfo/index';

const CreateAdminDialog = ({ visible, onClose, onSuccess }) => {
  const [formData, setFormData] = useState({
    account: '',
    name: '',
    gender: '',
    email: '',
    department: '',
    identity: '产品管理员'
  });

  const [title, setTitle] = useState('新建产品管理员');

  useEffect(() => {
    const handleCreateId = () => {
      setFormData((prev) => ({
        ...prev,
        account: '',
        name: '',
        gender: '',
        email: '',
        department: '',
        identity: '用户管理员'
      }));
      setTitle('新建用户管理员');
    };

    handleCreateId()
  }, []);

  const handleSubmit = async () => {
    try {
      const res = await createAdmin(formData);
      if (res.status === 0) {
        message.success('创建管理员成功');
        onSuccess();
        onClose();
      } else {
        message.error('创建管理员失败');
        onClose();
      }
    } catch (error) {
      console.log(error)
      onClose();
    }
  };

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={onClose}
      footer={null}
      width={600}
    >
      <Form
        layout="vertical"
        initialValues={formData}
        onFinish={handleSubmit}
      >
        <Form.Item
          label="账号"
          name="account"
          rules={[{ required: true, message: '请输入管理员的注册账号' }]}
        >
          <Input
            value={formData.account}
            onChange={(e) => setFormData({ ...formData, account: e.target.value })}
          />
        </Form.Item>
        <Form.Item
          label="姓名"
          name="name"
          rules={[{ required: true, message: '请输入管理员的名字' }]}
        >
          <Input
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
          />
        </Form.Item>
        <Form.Item
          label="性别"
          name="gender"
          rules={[{ required: true, message: '请输入管理员的性别' }]}
        >
          <Select
            value={formData.gender}
            onChange={(value) => setFormData({ ...formData, gender: value })}
            placeholder="请选择性别"
            options={[
              {
                label: '男',
                value: '男',
              },
              {
                label: '女',
                value: '女',
              }
            ]}
          >
          </Select>
        </Form.Item>
        <Form.Item
          label="邮箱"
          name="email"
          rules={[{ required: true, message: '请输入管理员的邮箱' }]}
        >
          <Input
            value={formData.email}
            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
          />
        </Form.Item>
        <Form.Item
          label="部门"
          name="department"
          rules={[{ required: true, message: '请输入管理员的部门' }]}
        >
          <Select
            value={formData.department}
            onChange={(value) => setFormData({ ...formData, department: value })}
            placeholder="请选择部门"
            options={[
              { value: '产品部', label: '产品部' },
              { value: '用户部', label: '用户部' },
            ]}
          >
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" block>
            确定
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

CreateAdminDialog.propTypes = {
  visible: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  onSuccess: PropTypes.func.isRequired,
};

export default CreateAdminDialog;
